import React, { useMemo, useState } from "react";
import MyTick from "../../component/MyTick";
import { NavBar } from "antd-mobile";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { List, Switch } from "antd-mobile";
import { Cell } from "react-vant";
import { Button, Space } from "antd-mobile";
import { Popup } from "antd-mobile";
import http from "../../api/http";
function Index() {
  const navigate = useNavigate();
  const [sj] = useSearchParams();
  const price = sj.get("price");
  const seat = sj.get("seat");
  console.log(price, seat);
  const { state } = useLocation();
  const [visible1, setVisible1] = useState(false);
  // console.log(state)
  //   const dispatch = useDispatch();

  const { TickListDatas } = useSelector((state) => state.TickSlice);
  const selectTickList = useMemo(() => {
    return TickListDatas.filter((item) => item.state);
  }, [TickListDatas]);

  const handleToPlay = async () => {
    const res = await http.get("/api/pay", {
      params: {
        title: "支付宝支付",
        id: state.id,
        price: price,
      },
    });

    const { data, code } = res.data;
    if (code === 200) window.location.href = data;
  };
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>支付订单</NavBar>
      <MyTick state={state}></MyTick>
      <List style={{ marginTop: 20 }}>
        {selectTickList.map((item, ind) => (
          <List.Item key={ind} description={item.code}>
            {item.name}
          </List.Item>
        ))}
      </List>

      <Cell title="车次订单" value={state.id} />
      <Cell title="车票价格" value={price} />
      <Cell title="车次坐席" value={seat} />

      <Button
        block
        color="primary"
        size="large"
        onClick={() => setVisible1(true)}
      >
        确认下单
      </Button>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <MyTick state={state}></MyTick>
        <div style={{ marginTop: 20 }}>
          <Button block color="success" size="large">
            微信
          </Button>
          <Button
            block
            color="primary"
            size="large"
            onClick={() => handleToPlay()}
          >
            支付宝
          </Button>
          <Button block color="warning" size="large">
            云闪付
          </Button>
        </div>
      </Popup>
    </div>
  );
}

export default Index;
